import { defineComponent, h } from 'vue'
import type { Props as Reno14ProProps } from '@/components/scroll-mask/types.ts'
import _ScrollMask from '@/components/scroll-mask/index.vue'

export const useScrollGroup = () => {
  const key = '_group'
  const value = 'reno14-pro'
  const scrollGroup = {
    [key]: value,
  }

  return {
    key,
    value,
    scrollGroup,
  }
}

export const useMask = (props?: Reno14ProProps) => {
  const { scrollGroup } = useScrollGroup()

  const ScrollMask = defineComponent((innerProps, { slots }) => {
    const _mergeProps: Reno14ProProps = {
      ...props,
      ...innerProps,
      scrollGroup,
    }

    return () => h(_ScrollMask, _mergeProps, slots)
  })

  return [ScrollMask]
}
